<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <template v-for="(item, index) in items">
      <el-row :key="index">
        <el-col :span="24">
          <template
            v-if="
              ['text', 'password', 'number', 'email'].indexOf(item.type) != -1
            "
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <el-input
                :type="item.type"
                :clearable="true"
                v-model="form[item.name]"
                :placeholder="item.placeholder"
              ></el-input>
            </el-form-item>
          </template>
          <template v-if="['select'].indexOf(item.type) != -1">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-select
                v-model="form[item.name]"
                :placeholder="item.placeholder"
              >
                <el-option
                  v-for="(i, index) in item.options"
                  :key="index"
                  :value="i.value"
                  :label="i.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>

          <template v-if="['treeselect'].indexOf(item.type) != -1">
            <el-form-item :label="item.label" :prop="item.prop">
              <treeselect
                v-model="form[item.name]"
                :options="item.options"
                :normalizer="normalizer"
              ></treeselect>
            </el-form-item>
          </template>
          <template v-if="['file'].indexOf(item.type) != -1">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-upload
                class="upload-demo"
                action="string"
                :data="{ name: item.name }"
                :http-request="uploadImg"
                :before-upload="beforeUpload"
                :limit="1"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/jpeg/png文件，且不超过2M
                </div>
              </el-upload>
            </el-form-item>
          </template>
          <template v-if="['switch'].indexOf(item.type) != -1">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-switch v-model="form[item.name]" active-color="#13ce66">
              </el-switch>
            </el-form-item>
          </template>
          <template v-if="['area'].indexOf(item.type) != -1">
            <el-form-item :label="item.label" :prop="item.prop">
              <mavon-editor v-model="form[item.name]" />
            </el-form-item>
          </template>

          <template v-if="['date'].indexOf(item.type) != -1">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-date-picker
                v-model="form[item.name]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </template>

    <el-row>
      <el-form-item>
        <el-button size="small" icon="el-icon-refresh" @click="resetForm"
          >重置</el-button
        >
        <el-button
          size="small"
          icon="el-icon-circle-check"
          type="primary"
          @click="save"
          >保存</el-button
        >
      </el-form-item>
    </el-row>
  </el-form>
</template>
<script>
// import the component
import { Treeselect } from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

// 注册mavonEdit
import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
// use
Vue.use(mavonEditor);

export default {
  name: "Form1",
  components: { Treeselect },
  props: {
    rules: {
      type: Object,
      default: () => {},
    },
    items: {
      type: Array,
      default: () => {},
    },

    form: {
      type: Object,
      default: () => {},
    },
    save: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      uploadUrl: [],
    };
  },
  methods: {
    validateForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          flag = true;
        }
      });
      return flag;
    },
    // 重置表单
    resetForm() {
      console.log(this.$refs["form"]);
      this.$refs["form"].resetFields();
    },
    //后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children,
      };
    },
    // 上传图片
    uploadImg(param) {
      const formData = new FormData();

      formData.append("file", param.file);
      //调用文件上传
      this.postRequest("/upload", formData).then((res) => {
        this.form[param.data.name] = res.obj;
        console.log(this.form);
      });
    },
    //上传之前的验证
    beforeUpload(file) {
      const isIMAGE =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isIMAGE) {
        this.$message.error("上传头像图片只能是 JPG/JPEG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isIMAGE && isLt2M;
    },
  },
};
</script>
<style></style>
